<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="gongqu">
    <div>
      <el-select v-model="queryForm.gqId" collapse-tags multiple filterable placeholder="工段名称">
        <el-option v-for="item in gongquList" :key="item.id" :label="item.gqName" :value="item.id"> </el-option>
      </el-select>
      <el-button type="primary" class="search" @click="getGongQu">查 询</el-button>
    </div>
    <el-button type="primary" v-if="hasRole('gd:setting:add')" class="buttonAdd button_add_zl" @click="addGq" style="cursor: pointer;">
    	<i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
    </el-button>
    <wh-table :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option">
      <template slot-scope="props" slot="operate">
        <div> <span class="caozuo_span">
          	<a style="cursor: pointer;" v-if="hasRole('gd:setting:edit')"  @click="editGq(props.rowData)">编辑</a>
        	</span> <span class="caozuo_span">
         	 	<a style="cursor: pointer;"  @click="lookBoard(props.rowData)"><span >看板</span></a>
          </span> <span class="caozuo_span">
          	<a v-if="hasRole('gd:setting:delete')" @click="deleteGq(props.num,props.row,props.rowData)">删除</a>
        	</span> </div>
      </template>
    </wh-table>
    <edit-gq></edit-gq>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editGq from "./editGq2";
  export default {
    name: 'gongQu',
    components: {
      whTable,
      editGq
    },
    data() {
      return {
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        operateType: "",
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
        queryForm: {
          gqId: []
        },
        gongquList: []
      }
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("updateGongQu", function() {
        self.getGongQu();
        self.getGongQuSelect();
      });
      self.getGongQu();
      self.getGongQuSelect();
    },
    methods: {
      getGongQuSelect() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gd/queryGongDuanList",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            self.gongquList = resp.result;
          }
        });
      },
      lookBoard(row) {
        let self = this;
        const {
          href
        } = self.$router.resolve({
          path: "/lookboard?code=" + row.code + "&noAutoScroll=true",
        });
        window.open(href, '_blank');
      },
      getGongQu() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/gd/queryAllGqByGqId",
          method: "post",
          data: JSON.stringify(self.queryForm.gqId),
          dataType: 'json',
          contentType: "application/json"
        }).then(resp => {
          if(resp.success) {
            self.tableLoading = false;
            self.tableHeader = [{
              "columnName": "gqName",
              "coloumNameCn": "工段名称"
            }, {
              "columnName": "gxName",
              "coloumNameCn": "工序名称"
            }, {
              "columnName": "code",
              "coloumNameCn": "工装编码"
            }, {
              "columnName": "name",
              "coloumNameCn": "工装名称"
            }];
            self.tableData = resp.result;
            self.tableData.map(item => (item.gxName = item.gxList.join("/")))
            self.option.showOperate = true;
          }
        });
      },
      editGq(rowData) {
        let self = this;
        let tree = self.contextGq(rowData);
        self.operateType = 'edit';
        self.$eventBus.$emit("addGongduanTree", this.operateType, tree)
      },
      addGq() {
        let self = this;
        this.operateType = 'add';
        self.$eventBus.$emit("addGongduanTree", this.operateType)
      },
      contextGq(rowData) {
        let defaultTree = {
          text: rowData.gqName,
          value: rowData.gqName,
          value_1: "",
          value_2: "",
          id: rowData.gqId,
          gzId: rowData.id,
          opened: true,
          selected: false,
          loading: false,
          edit: false,
          icon: "fa fa-industry",
          root: 1,
          children: [{
            text: (rowData.name ? rowData.name : "") + "/" + (rowData.code ? rowData.code : ""),
            value: rowData.name ? rowData.name : "",
            value_1: rowData.code,
            value_2: rowData.respMan,
            gzId: rowData.id,
            opened: true,
            selected: false,
            loading: false,
            edit: false,
            icon: "fa fa-university",
            root: 2,
            children: []
          }]
        };
        for(let gx of rowData.gxList) {
          let gxTree = {
            text: gx,
            value: gx,
            value_1: "",
            opened: true,
            selected: false,
            loading: false,
            edit: false,
            icon: "fa fa-tasks",
            root: 3,
            children: []
          };
          defaultTree.children[0].children.push(gxTree);
        }
        return defaultTree;
      },
      deleteGq(num, row, rowData) {
        let self = this;
        let param = {
          id: rowData.id,
          status: '-1',
          gqId: rowData.gqId
        };
        self.$confirm('确定删除该工段信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/gd/deleteGongDuanDetail",
            method: "post",
            params: param,
          }).then(resp => {
            if(resp.success) {
              self.getGongQu();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")
        });
      }
    }
  }
</script>
<style scoped>
  .gongqu .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .gongqu .buttonAdd {
    margin-top: 15px;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 13px;
  }
  .search.el-button--medium {
    padding: 5px 9px !important;
    background: #34bfc6;
    border-color: #34bfc6;    
    margin-left: 10px;
  }
  .gongqu .el-input {
    width: 83% !important;
  }
  .gongqu .el-select__tags {
    max-width: 150px;
  }
  .gq_dialog .el-input {
    width: 65% !important
  }
</style>